
class Food
{
    constructor(el){
        //地图对象
        this.el = el
        //食物属性
        this.size = 20
        this.foodObj = null
        this.left = 0
        this.top = 0
    }
    // 创造食物
    create(){
        //创建食物
        let divObj = document.createElement('div')
        //食物的属性，占一个格子
        divObj.style.width = this.size+'px'
        divObj.style.height = this.size+'px'
        divObj.style.background = 'green'
        divObj.style.position = 'absolute'
        //追加页面
        this.el.appendChild(divObj)
        //获取食物盒子，建立随机事件
        this.foodObj = divObj
        //调用函数
        this.move()
    }
    // 食物位置随机
    move(){
        //宽度/高度除以每个小格的宽度=每行/列格子个数
        let maxW = this.el.clientWidth/this.size -1
        let maxH = this.el.clientHeight/this.size-1

        //位置随机在0-40格子之间乘以格子宽度20
        this.left = Math.floor(Math.random()*(maxW+1))*this.size
        this.top = Math.floor(Math.random()*(maxH+1))*this.size

        
        this.foodObj.style.left=this.left+'px'
        this.foodObj.style.top=this.top+'px'
    }
}